<template>
  <div class="home_page">
    <my-header>
      <template #left>
        <i class="iconfont icon-sousuo" @click="$router.push('/city')"></i>
      </template>
      <template #center> {{ city.name || '商圈名称' }}  </template>
      <template #right> 登录 | 注册 </template>
    </my-header>
    <ul class="page_list">
      <li v-for="(item,index) in shopList" :key="index" @click="$router.push(`/detail?id=${item.id}`)">
         <h5>{{item.name}}</h5>
         <p>{{item.address}}</p>
         <section>预计需要时长：{{item.order_lead_time}}</section>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import myHeader from "../../components/myHeader.vue";
import api from "../../api/request";
export default {
  components: { myHeader },
  setup() {
    const route = useRoute();
    let geohash = route.query.geohash;
    // console.log(geohash);

    const data = reactive({
      city: {}, // 商圈具体的信息
      shopList: [], // 商铺的信息
    });
    if (geohash) {
      api.get(`/v2/pois/${geohash}`).then((res) => {
        // console.log(res);
        // setTimeout(() => {
        //   data.city = res;
        // }, 1000);
        data.city = res;
      });
      api.get(`/shopping/restaurants?latitude=${geohash.split(',')[0]}&longitude=${geohash.split(',')[1]}`).then(res => {
        data.shopList = res;
      })
    }
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.icon-sousuo {
  font-size: 20px;
}
.page_list{
  height: calc(100% - 50px);
  overflow: auto;
  li{
    padding: 0 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
  }
}
</style>